﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Themes Basics</title>
<style type="text/css">
@import "css/jquery.themes.css";

fieldset { clear: both; font-size: 75%; }
legend { font-weight: bold; }
#label { float: left; margin: 0px 20px 20px 0px; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.themes.js"></script>
<script type="text/javascript">
$(function() {
	$.themes.init({themeBase: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/',
		onSelect: reloadIE});
	$('#themeSelection').themes();
});

var first = true;

// IE doesn't update the display immediately, so reload the page
function reloadIE(id, display, url) {
	if (!first && $.browser.msie) {
		window.location.href = window.location.href;
	}
	first = false;
}
</script>
</head>
<body>
<h1>jQuery Themes Basics</h1>
<p>This page demonstrates the very basics of the
	<a href="http://keith-wood.name/themes.html">jQuery Themes plugin</a>.
	It contains the minimum requirements for using the plugin and
	can be used as the basis for your own experimentation. For more detail see the
	<a href="http://keith-wood.name/themesRef.html">documentation reference</a> page.</p>
<p>The page shows a sample <a href="http://jqueryui.com">jQuery UI</a> component
	and allows you to set the CSS theme to be used from amongst the
	<a href="http://jqueryui.com/themeroller/">jQuery ThemeRoller</a> examples.</p>
<p><span id="label">Select your new theme:</span> <span id="themeSelection"></span></p>
<fieldset>
	<legend>jQuery UI sample</legend>
	<div id="compGroupA" class="clearfix">
		<!-- Date Picker -->
		<h2 class="demoHeaders">Datepicker</h2>
		<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
			<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
				<a title="Prev" class="ui-datepicker-prev ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
				<a title="Next" class="ui-datepicker-next ui-corner-all" href="#"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
				<div class="ui-datepicker-title">
					<span class="ui-datepicker-month">December</span>
					<span class="ui-datepicker-year">2008</span>
				</div>
			</div>
			<table class="ui-datepicker-calendar">
				<thead>
					<tr>
						<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
						<th><span title="Monday">Mo</span></th>
						<th><span title="Tuesday">Tu</span></th>
						<th><span title="Wednesday">We</span></th>
						<th><span title="Thursday">Th</span></th>
						<th><span title="Friday">Fr</span></th>
						<th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
						</td><td class=""><a href="#" class="ui-state-default">1</a></td>
						<td class="ui-datepicker-today"><a href="#" class="ui-state-default ui-state-highlight">2</a></td>
						<td class=""><a href="#" class="ui-state-default">3</a></td>
						<td class=""><a href="#" class="ui-state-default">4</a></td>
						<td class=""><a href="#" class="ui-state-default">5</a></td>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">6</a></td>
					</tr>
					<tr>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">7</a></td>
						<td class=""><a href="#" class="ui-state-default">8</a></td>
						<td class=""><a href="#" class="ui-state-default">9</a></td>
						<td class=""><a href="#" class="ui-state-default">10</a></td>
						<td class=""><a href="#" class="ui-state-default">11</a></td>
						<td class=""><a href="#" class="ui-state-default">12</a></td>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">13</a></td>
					</tr>
					<tr>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">14</a></td>
						<td class=""><a href="#" class="ui-state-default">15</a></td>
						<td class=""><a href="#" class="ui-state-default">16</a></td>
						<td class=""><a href="#" class="ui-state-default">17</a></td>
						<td class=""><a href="#" class="ui-state-default">18</a></td>
						<td class="ui-datepicker-current-day"><a href="#" class="ui-state-active">19</a></td>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">20</a></td>
					</tr>
					<tr>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">21</a></td>
						<td class=""><a href="#" class="ui-state-default">22</a></td>
						<td class=""><a href="#" class="ui-state-default">23</a></td>
						<td class=""><a href="#" class="ui-state-default">24</a></td>
						<td class=""><a href="#" class="ui-state-default">25</a></td>
						<td class=""><a href="#" class="ui-state-default">26</a></td>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">27</a></td>
					</tr>
					<tr>
						<td class="ui-datepicker-week-end"><a href="#" class="ui-state-default">28</a></td>
						<td class=""><a href="#" class="ui-state-default">29</a></td>
						<td class=""><a href="#" class="ui-state-default">30</a></td>
						<td class=""><a href="#" class="ui-state-default">31</a></td>
						<td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
						</td><td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
						</td><td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled">
					</td></tr>
				</tbody>
			</table>
		</div>
	</div><!-- /#compGroupB -->
</fieldset>
</body>
</html>
